<template>
  <div class="app-container">
    <el-button type="primary" plain @click="addModal()">添加活动</el-button>

    <div style="float: right;">
      <el-input @keyup.enter.native="search" v-model="searchContent" style="width: 200px;" placeholder="通过活动标题搜索">
      </el-input>
      <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
    </div>

    <el-table :data="list" border fit highlight-current-row style="width: 100%">

      <el-table-column width="50px" align="center" label="ID">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="所属小区">
        <template slot-scope="scope">
          <span>{{ scope.row.communityName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="活动标题">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="活动地点">
        <template slot-scope="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="举办单位">
        <template slot-scope="scope">
          <span>{{ scope.row.organizer }}</span>
        </template>
      </el-table-column>

      <el-table-column width="175px" align="center" label="活动开始时间">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime }}</span>
        </template>
      </el-table-column>

      <el-table-column width="175px" align="center" label="活动截止时间">
        <template slot-scope="scope">
          <span>{{ scope.row.endTime }}</span>
        </template>
      </el-table-column>

      <el-table-column width="175px" align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <span>
            <el-link :type="scope.row.stytle">{{ scope.row.status }}</el-link>
          </span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="update(scope.row)" circle></el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="delInfo(scope.row)" circle></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页插件-->
    <div class="block" style="float: right;">
      <!-- page-size:默认每页显示条数-->
      <el-pagination @size-change="selectPage" @current-change="handleCurrentChange" :current-page="curPage"
        :page-sizes="[1, 3, 5, 10]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 对话框 -->
    <el-dialog :title="title" :visible.sync="isShow" width="35%">
      <!-- 添加滚动条 -->
      <el-scrollbar style="height: 350px;">
        <el-form ref="form" label-width="80px">
          <el-form-item label="所属小区">
            <el-col :span="20">
              <input type="hidden" v-model="activityForm.id" />
              <el-select v-model="activityForm.communityName" style="width: 100%" clearable placeholder="请选择小区">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>

          <el-form-item label="活动标题">
            <el-col :span="20">
              <el-input placeholder="请输入活动标题" v-model="activityForm.title"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="活动地点">
            <el-col :span="20">
              <el-input placeholder="请输入活动地点" v-model="activityForm.address"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="举办单位">
            <el-col :span="20">
              <el-input placeholder="请输入举办单位" v-model="activityForm.organizer"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="开始时间">
            <el-col :span="20">
              <el-date-picker v-model="activityForm.startTime" type="datetime" placeholder="活动开始时间" align="right"
                style="width: 100%" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-col>
          </el-form-item>

          <el-form-item label="结束时间">
            <el-col :span="20">
              <el-date-picker v-model="activityForm.endTime" type="datetime" placeholder="活动结束时间" align="right"
                style="width: 100%" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-col>
          </el-form-item>

          <el-form-item label="创建时间">
            <el-col :span="20">
              <el-date-picker v-model="activityForm.createTime" type="datetime" placeholder="活动创建时间" align="right"
                style="width: 100%" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-col>
          </el-form-item>

          <el-form-item label="状态">
            <el-col :span="20">
              <el-radio-group v-model="activityForm.status" size="mini">
                <el-radio label="活动未开始" style="width: 75px;">活动未开始</el-radio>
                <el-radio label="活动进行中" style="width: 75px;">活动进行中</el-radio>
                <el-radio label="活动已结束" style="width: 75px;">活动已结束</el-radio>
              </el-radio-group>
            </el-col>
          </el-form-item>

        </el-form>
      </el-scrollbar> <!-- end 滚动条 -->

      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo()">保 存</el-button>
      </span>
    </el-dialog>
    <!-- end 对话框 -->

  </div>
</template>

<script>
  import myUtil from '../../../utils/myUtil'

  export default {
    name: 'activitiesList',
    data() {
      return {
        list: [],
        title: "添加",
        activityForm: {
          id: null,
          communityName: "",
          title: "",
          address: "",
          organizer: "",
          startTime: "",
          endTime: "",
          createTime: "",
          status: "",
          stytle: "",
        },
        isShow: false,
        listLoading: true,
        total: 0, // 总条数
        totalPage: 0, // 总页数
        curPage: 1, // 当前页
        rows: 5, // 每页显示条数
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        options: [{
          value: '海棠苑',
          label: '海棠苑'
        }, {
          value: '蓝雾苑',
          label: '蓝雾苑'
        }, {
          value: '南浦苑',
          label: '南浦苑'
        }, {
          value: '桂花苑',
          label: '桂花苑'
        }],
        value: '',
        searchContent: "", //搜索内容
        stashList: [],
      }
    },
    methods: {
      getList() {
        var self = this;
        this.axios({
          method: 'get',
          url: myUtil.url + '/tb-activity/list',
          params: {
            "page": self.curPage,
            "row": self.rows
          }
        }).then(function(rs) {
          console.log(rs);
          self.list = rs.data.info;
          self.total = rs.data.total;
          self.totalPage = rs.data.totalPage;
          self.stashList = rs.data.info;

          self.list.forEach(item => {
            if (item.status == "活动未开始") {
              item.stytle = "danger";
            } else if (item.status == "活动进行中") {
              item.stytle = "primary";
            } else {
              item.stytle = "success";
            }
          })
        });
      },
      addModal() {
        // 打开模态框
        this.isShow = true;
        // 更改模态框标题
        this.title = "新增活动信息";
        // 清除表单元素
        this.activityForm.id = null;
        this.activityForm.communityName = "";
        this.activityForm.title = "";
        this.activityForm.address = "";
        this.activityForm.organizer = "";
        this.activityForm.startTime = "";
        this.activityForm.endTime = "";
        this.activityForm.createTime = "";
        this.activityForm.status = "";
      },
      update(x) { //打开修改模态框
        //显示模态框
        this.isShow = true;
        //更改模态框的标题
        this.title = "修改活动信息";
        console.log(x)
        //把选中的值赋值给模态框的表单元素
        this.activityForm.id = x.id
        this.activityForm.communityName = x.communityName;
        this.activityForm.title = x.title;
        this.activityForm.address = x.address;
        this.activityForm.organizer = x.organizer;
        this.activityForm.startTime = x.startTime;
        this.activityForm.endTime = x.endTime;
        this.activityForm.createTime = x.createTime;
        this.activityForm.status = x.status;
      },
      delInfo(x) { //删除
        var is = confirm("你确定要删除数据吗?");
        if (is) {
          var self = this;
          this.axios({
            method: 'delete',
            url: myUtil.url + '/tb-activity/del/' + x.id,
          }).then(function(rs) {
            console.log(rs.data.info);
            if (rs.data.info == "删除成功") {
              self.$message({
                showClose: true,
                message: '删除成功',
                type: 'success'
              });
              //刷新
              self.getList();
            }
          });
        }
      },
      saveInfo() { // 保存
        var url = "";
        var head = "";
        if (this.title == "新增活动信息") {
          url = myUtil.url + "/tb-activity/add";
          head = 'post'
        } else {
          url = myUtil.url + "/tb-activity/update";
          head = 'put'
        }
        var self = this;
        this.axios({
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          method: head,
          url: url,
          data: JSON.stringify(self.activityForm),
        }).then(function(rs) {
          console.log(rs.data);
          self.$message({
            showClose: true,
            message: '保存成功',
            type: 'success'
          });
          if (rs.data.info == "保存成功") {
            // 关闭模态框
            self.isShow = false;
            // 刷新
            self.getList();
          }
        })
      },
      handleCurrentChange(v) { // 当前页触发事件
        this.curPage = v;
        this.getList();
      },
      selectPage(v) { // 用户选择页数
        this.rows = v;
        this.getList();
      },
      search() {
        if (this.searchContent != "") {
          this.list = this.stashList
          this.list = this.list.filter(item => {
            return item.title.includes(this.searchContent)
          })
        } else {
          this.list = this.stashList
        }
      },
    },
    mounted() {
      this.getList();
      console.log(this.$route.query.info);
    }
  }
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }

  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
